<template>
  <div>
    <div v-if="this.active === '1'">
      <ordinary-table ref="ordinaryTable"/>
    </div>

    <div v-if="this.active === '2'">
      <advanced-table ref="advancedTable" />
    </div>
    <div v-if="this.active === '3'">

    </div>
    <div v-if="this.active === '4'">

    </div>

    <footer-tool-bar>
      <a-button @click="() => {this.$router.go(-1);}" type="cancel">返回</a-button>
    </footer-tool-bar>
  </div>
</template>

<script>
import FooterToolBar from '@/components/FooterToolbar'
import ordinaryTable from './OrdinaryTable'
import advancedTable from './AdvancedTable'
export default {
  name: 'Index',
  components: {
    FooterToolBar,
    ordinaryTable,
    advancedTable
  },
  data () {
    return {
      tabs: {
        items: [
          {
            key: '1',
            title: '一般表格'
          },
          {
            key: '2',
            title: 's-table'
          },
          {
            key: '3',
            title: '可编辑表格'
          }
        ],
        active: () => {
          return this.active
        },
        callback: (e) => {
          this.active = e
        }
      },
      active: '1'
    }
  }
}
</script>

<style scoped>
</style>
